<script lang="ts" setup>
// lang="ts" 支持 ts 语法
// setup 是 Vue3 的组合式 API 写法
console.log("根组件被加载了");

// 定义变量
const msg: string = "Hi World";
const nickName: string = "张三";
const age: number = 19;
</script>

<template>
  <div>
    <!-- template 类似鸿蒙组件的build（）函数，用于构建界面 -->
    <h1 class="title">{{ msg }}</h1>
    <p>{{ msg }}</p>
    <p>{{ nickName.charAt(0) }}</p>
    <p>{{ age >= 18 ? '已成年' : '未成年'}}</p>
    <!-- 常见错误：双大括号{{}}不能用于属性绑定 -->
    <input type="text" value="{{ msg }}"/>
  </div>
</template>

<style scoped>
/* scoped 样式 只对当前组件有效 */
.title {
  color: red;
}
</style>
